<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button type="primary" size="mini" @click="showModal">新增图片</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="src"
        label="图片链接"
      >
        <template slot-scope="scope">
          <a :href="href" target="_blank" @click="tolink(scope.row, $event)">图片预览</a>
        </template>
      </el-table-column>
      <el-table-column
        prop="src"
        label="图片地址"
      />
      <el-table-column
        prop="status"
        label="图片状态"
        align="center"
      >
        <template slot-scope="scope">
          <span v-text="scope.row.status == 1 ? '正常' : '禁用' " />
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deleteRow(scope, tableData,-1)"
          >
            删除
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deleteRow(scope, tableData, 1)"
          >
            启用
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deleteRow(scope, tableData, 0)"
          >
            禁用
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="图片新增" :visible.sync="show">
      <el-form
        :model="form"
      >
        <el-form-item
          label="图片地址"
          label-width="80"
        >
          <el-input v-model="form.src" />
        </el-form-item>
        <el-form-item>
          <el-upload
            action="http://10.36.138.16:9527/api/v1/uploadimg"
            name="addimg"
            :file-list="fileList"
            list-type="picture"
            class="upload-demo"
            :on-success="successImg"
            :on-remove="removeImg"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      show: false,
      fileList: [],
      href: '',
      form: {
        name: '',
        src: ''
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$goodsApi.fetchGetBanner({ key: 1 }).then(res => {
        console.log(res)
        this.tableData = res.data
      })
    },
    showModal() {
      this.show = true
    },
    submit() {
      if (!this.form.src) return this.$message({ message: '字段缺失', type: 'warning' })
      console.log(this.form)
      this.$goodsApi.fetchaddBanner(this.form).then(res => {
        console.log(res)
        this.$message({
          message: res.msg,
          type: 'success',
          duration: 2000
        })
        this.show = false
        this.form = {}
        this.init()
      })
    },
    changeStatus(_id, status) {
      this.$goodsApi.fetchSetBanner({ _id, status }).then(res => {
        this.$message({ type: 'success', message: res.msg })
        console.log(res)
      })
    },
    deleteRow(scope, rows, key) {
      const { _id } = scope.row
      console.log(key)
      switch (key) {
        case -1:
          console.log(_id)
          this.$goodsApi.fetchDelBanner({ _id }).then(res => {
            console.log(res)
            this.$message({ type: 'success', message: res.msg })
          })
          rows.splice(scope.$index, 1)
          break
        case 1:
          this.changeStatus(_id, key)
          scope.row.status = key
          break
        case 0:
          this.changeStatus(_id, key)
          scope.row.status = key
          break
        default:
          break
      }
    },
    successImg(res, file, fileList) {
      // console.log(res,file,fileList);
      this.form.src = res.data
      this.fileList = [file]
    },
    removeImg(res, f1, f2) {
      console.log(res)
      this.form.src = ''
    },
    tolink(row, e) {
      console.log(row.src)
      this.href = 'http://10.36.138.16:3000' + row.src
    }
  }
}
</script>

<style lang="css" scoped>
</style>
